import React, { useState } from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input } from 'antd';
import { useHistory } from 'react-router-dom';
import backgroundImage from '../assets/images/1.jpg';
import axios from 'axios';
const Login_admin = () => {

    const [uname,setUsername] = useState('');
    const [passwd,setPasswd] = useState('');
    const history = useHistory();

    //点击登录
    const onFinish = () => {
        axios.post('http://localhost:2023/auth/admin-login', {
            username:uname,
            passwd:passwd,
        })
        .then((res)=>{
            console.log(res);
            history.push("/user");
        }).catch(error => {
        console.error(error);
        });
    };
    return (
        <div style={{ 
            display: 'flex', 
            justifyContent: 'center', 
            height: '97vh', 
            alignItems: 'center',
            backgroundImage: `url(${backgroundImage})`,//背景图
            backgroundSize: 'cover',
            }}>
            <div style={{ 
              border: '1px solid #BEBEBE',
              width: 300,
              padding: 20,
              borderRadius:10,
              backgroundColor: 'rgba(255, 255, 255, 0)',
              }}>
                {/* 登录标题 */}
              <h1 style={{ 
                textAlign: 'center',
                }}
                >
                  登录
              </h1>
              <Form
                name="normal_login"
                className="login-form"
                initialValues={{
                  remember: true,
                }}
                onFinish={onFinish}
              >
                {/* 用户名 */}
                <Form.Item
                  name="username"
                  rules={[
                    {
                      required: true,
                      message: '请输入用户名!',
                    },
                  ]}
                  value={uname}
                  onChange = {(e) => setUsername(e.target.value)}
                >
                  <div style={{ 
                    display: 'flex', 
                    alignItems: 'center' 
                    }}
                  >
                    <UserOutlined className="icon" style={{ color: '#55CA92' }} />
                    <Input 
                    placeholder="用户名" 
                    className="input" 
                    style={{ 
                      width: 250, 
                      marginLeft: 20,
                      backgroundColor: 'rgba(255, 255, 255, 0.3)' 
                    }} 
                    />
                  </div>
                </Form.Item>
                {/* 密码 */}
                <Form.Item
                  name="password"
                  rules={[
                    {
                      required: true,
                      message: '请输入你的密码!',
                    },
                  ]}
                  value={passwd}
                  onChange = {(e) => setPasswd(e.target.value)}
                >
                  <div style={{ 
                    display: 'flex', 
                    alignItems: 'center' 
                    }}>
                    <LockOutlined className="icon" style={{ color: '#55CA92' }} />
                    <Input 
                    type="password" 
                    placeholder="密码" 
                    className="input" 
                    style={{ 
                      width: 250, 
                      marginLeft: 20,
                      backgroundColor: 'rgba(255, 255, 255, 0.3)' 
                    }} 
                    />
                  </div>
                </Form.Item>
                
                {/* 登录按钮 */}
                <Form.Item>
                  <div 
                  className="button-container" 
                  style={{ 
                    display: 'flex', 
                    justifyContent: 'center' 
                    }}>
                    <Button 
                    type="text" 
                    htmlType="submit" 
                    className="login-form-button" 
                    style={{ 
                      width: 200, 
                      backgroundColor: '#55CA92', 
                      color: 'white', 
                      textAlign: 'center' 
                      }}
                      //onClick={handleLogin} 
                    >
                      登录
                    </Button>
                  </div>
                </Form.Item>
                
              </Form>
            </div>
        </div>
    )
}

export default Login_admin